<template>
    <div class="Gedanbof">
      <div class="s-img">
        <img class="auto-img" :src="singerData.picUrl" alt="">
      </div>
      <div class="s-name">{{ singerData.name }}</div>
      <div class="pi" v-if="isPlayIcon" @click="changeAudioId(singerData)">
        <span class="iconfont" ><svg class="icon " aria-hidden="true" >
              <use :xlink:href="[isPlay ? '#icon-zanting' : '#icon-bofang']"> </use>    
            </svg></span>
      </div>

      <div class="iteLis" >
         <div class="item" >
           <div class="theitemLeft">
             <span class="leftSpan">{{i + 1}} </span>
           </div> 

            <div class="musicsong">
           <p>{{item.name}} </p>
           <span v-for="(itemone,index) in item.ar " :key = index>
            {{itemone.name}}
          </span>
          </div>
        </div>
       </div>
       <div class="theitemRight" v-if="isPlayIcon" @click="changeAudioId(singerData)">
        <svg class="icon bofang"  aria-hidden="true" v-if ="item.mv !=0"  >
           
            <use :xlink:href="[isPlay ? '#icon-zanting' : '#icon-bofang']"> </use>     
          </svg>
          <svg class="icon liebiao" aria-hidden="true" >
            <use xlink:href="#icon-bofanggedan"> </use>    
          </svg>
       </div>

    </div>
    
  </template>

<script>
import { mapMutations, mapState } from 'vuex';
    export default {
        name:"Gedanbof",
        props: {
    //歌手或者歌曲的数据
    singerData: {
      type: Object,
      default() {
        return {};
      }

    },

    //控制播放图标的显示和隐藏
    isPlayIcon: {
      type: Boolean,
      default: false
    }

  },
 

  computed: {
    ...mapState(['currentAudioInfo', '$audio','isMain', 'isPlay',])
  },

  methods: {
    ...mapMutations(['setAudioId', 'setAudioPlayStatus']),

    //修改音频id
    changeAudioId() {

      //判断当前音频的id是否和点击播放的音频id一致
      if(this.currentAudioInfo.audioId === this.singerData.id) {
        // console.log('进来');
        //修改图标状态
        if (this.singerData.isPlay) {
          this.singerData.isPlay = false;
          //vuex, 修改音频播放状态
          this.setAudioPlayStatus(this.singerData.isPlay);
          this.$audio.pause();
        } else {
          this.singerData.isPlay = true;
          //vuex, 修改音频播放状态
          this.setAudioPlayStatus(this.singerData.isPlay);

          this.$audio.play();
          
        }
      } else {
        //触发组件的@changeplay事件通知父组件
        this.$emit('changeplay');

        this.singerData.isPlay = true;

        //vuex, 修改音频播放状态
        this.setAudioPlayStatus(this.singerData.isPlay);

        //vuex, 修改音频id
        this.setAudioId({
          audioId: this.singerData.id,
          singerName: this.singerData.singerName,
          songName: this.singerData.name,
          singerPic: this.singerData.picUrl
        });

        
      }

    },

     //播放暂停音频
     changeAudioStatus() {

if (this.currentAudioInfo.audioId === '') {
  return;
}


this.setAudioPlayStatus(!this.isPlay);
if (this.isPlay) {
  this.$audio.play();
} else {
  this.$audio.pause();
}

}
  }
    }
</script>

<style lang="less" scoped>
.Gedanbof{
    
   .iteLis{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item{
      margin-left: 10px;

      display: flex;
      align-items: center;
      .theitemLeft{
        .leftSpan{
          font-size: medium;
          font-weight: 600;
          margin-right: 10px;
          color: #4d4d4e;
        }
         
      }
      .musicsong{
        p{
          font-size: medium;
        font-weight: 900;
        margin: 6px 0;
        }
        span{
          font-size: small;
          color: #bdbdbd;
        }
      }

    }
  }
  .theitemRight{
    margin-right: 10px;
    display: flex;
    align-items: center;
    .bofang{
      margin-right: 10px;
    }
  }
}
</style>